웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
'숫자 값에 콤마를 추가하여 나타내는 방법이 가능할까?'
만약 화폐 단위나 필요에 의해 콤마를 사용해야 하는 경우가 있을 수 있습니다. 예를들어 1000이라는 값이 있다면 1,000처럼 표기하는 것이죠.
! 어떻게 하면 자바스크립트 숫자에 콤마를 추가할 수 있을까?
자바스크립트를 사용해 클라이언트에서 숫자에 콤마를 넣는 방법에 대하여 알아보려합니다. 생각보다 간단한데요 어떻게하면 숫자값에 콤마를 추가하는지 알아보세요.# 자바스크립트를 사용하여 콤마(,) 추가하기
아마도 가장 좋은 방법은 당연히 CSS를 사용하는 방법이겠죠... 하지만 아쉽게도 현재까지 CSS만을 사용하여 comma를 구현하는 것은 없습니다. 그렇다면 다른 방법을 찾아봐야하는데요 ... 서버단에서 데이터를 가져와 보여주기 이전에 콤마를 추가하는 방법 역시 많이 사용되지만 클라이언트측에서 자바스크립트를 사용하는 방법을 알아봅니다.! 자바스크립트를 사용하는 방법이 가능
이 경우 정규표현식을 이용한 함수를 만들어 사용할 수 있는데 아래 코드는 특정 숫자 데이터에 콤마를 자동으로 추가해주는 방법입니다. 아래에서 예제와 함께 알아봅니다.! 숫자에 콤마를 추가하는 자바스크립트 예제보기
아래 에제는 숫자값을 불러와 문자로 바꾼 후 콤마를 추가하는 과정을 거치는 예제코드입니다. 함수 addComma()를 만들고 정규식을 적용하고 있습니다. 인자로 원하는 숫자를 넘겨주면 반환값으로 콤마가 들어간 문자를 반환하게 됩니다.function addComma(num) {
var regexp = /\B(?=(\d{3})+(?!\d))/g;
return num.toString().replace(regexp, ',');
}
var regexp = /\B(?=(\d{3})+(?!\d))/g;
return num.toString().replace(regexp, ',');
}
위 함수는 인자로 숫자로 넘겨받아 이를 문자 타입으로 변환후 정규표현식을 사용해 3자리마다 콤마(,)를 추가하는 매우 간단한 함수합니다. 간단하지만 우리가 원하는 결과를 모두 얻을 수 있죠. 그럼 아래와 같은 숫자를 추가하고 확인해보겠습니다.
! 숫자 123456 콤마 추가하기
숫자 123456에 함수를 적용하면 아래와 같이 결과가 나타납니다.var num = 123456;
addComma(num);
// '123,456' 반환
addComma(num);
// '123,456' 반환
! 숫자 100000000 콤마 추가하기
또 다른 예제로 숫자 100000000에 함수를 적용하면 아래와 같이 결과가 나타납니다.var num = 100000000;
addComma(num);
// '100,000,000' 반환
addComma(num);
// '100,000,000' 반환
이처럼 콤마를 쉽게 얻을 수 있었습니다.
그럼 아래 입력폼에 실제로 값을 입력해보세요. 다음 입력폼에 콤마를 추가되어 나타납니다.
<div>
<input type="number" onkeyup="this.nextElementSibling.value = addComma(~~this.value)" placeholder="숫자를 입력하세요" />
<input type="text" readonly="readonly" placeholder="0" />
</div>
<script>
var addComma = function(num) {
var regexp = /\B(?=(\d{3})+(?!\d))/g;
return num.toString().replace(regexp, ',');
};
</script>
<input type="number" onkeyup="this.nextElementSibling.value = addComma(~~this.value)" placeholder="숫자를 입력하세요" />
<input type="text" readonly="readonly" placeholder="0" />
</div>
<script>
var addComma = function(num) {
var regexp = /\B(?=(\d{3})+(?!\d))/g;
return num.toString().replace(regexp, ',');
};
</script>
왼쪽에 값을 입력하면 오른쪽에 자동으로 콤마가 추가되는 것이 보이시나요?
# 마치면서
인터넷을 통해 확인해보면 CSS를 통해 간편하게 콤마(,)를 추가하였으면 하는 사람들을 많이 볼 수 있었습니다. 일부는 메일을 통해 추가를 요청하기도 하였으나 아직은 CSS에 추가될 예정이나 자세한 계획은 모르겠네요... 하지만 스크립트를 이용하는 방법 역시 정규표현식을 사용하면 간단하므로 이를 사용하는 것이 현재로서는 최선의 방법이라 하겠습니다.아래의 글도 찾고 계시지 않나요?